<template>
	<view class="containter">
		<view class="height">
			<view class="background_img" v-if="userInfo.nickName">
				<view class="background"><image :src="userInfo.avatarUrl" mode=""></image></view>
				<view class="user">
					<image :src="userInfo.avatarUrl" mode=""></image>
					<view class="user_name">{{ userInfo.nickName }}</view>
				</view>
			</view>
			<view class="login" v-else>
				<navigator url="../login/index">去登录</navigator>
			</view>
		</view>
		<view class="order">
			<view @click="handler(index)" :class="index === curIndex ? 'order_containter active' : 'order_containter'" v-for="(item, index) in Shoppingorder" :key="index">
				<view class="icon" :class="item.icon"></view>
				<view class="content">{{ item.content }}</view>
			</view>
		</view>
		<view class="list">
			<view class="service">
				<view class="left" @click="relation">
					<view class="iconfont icon-wode-lianxikefu"></view>
					<view>联系客服</view>
				</view>
				<view class="right"><view class="phone">12712464829</view></view>
			</view>
			<view class="service" @click="handlerOpinion">
				<view class="left">
					<view class="iconfont icon-yijianfankui1"></view>
					<view>意见反馈</view>
				</view>
				<view class="right"><view class="phone"></view></view>
			</view>
			
			<!-- 平台判断 如果只希望在微信小程序编译 就使用这个平台判断 -->
			 <!-- #ifdef MP-WEIXIN -->
			    <view class="service">
			    	<view class="left">
			    		<view class="iconfont icon-banben"></view>
			    		<view>当前版本</view>
			    	</view>
			    	<view class="right">
			    		<view class="phone"><text>v.4.1.1</text></view>
			    	</view>
			    </view>
			 <!-- #endif -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 商品订单
			Shoppingorder: [
				{
					icon: 'iconfont icon-icon-test',
					content: '待付款'
				},
				{
					icon: 'iconfont icon-daishouhuo',
					content: '待收货'
				},
				{
					icon: 'iconfont icon-tuihuo',
					content: '退货/退款'
				},
				{
					icon: 'iconfont icon-quanbudingdan01',
					content: '全部订单'
				}
			],
			curIndex: 0, // 切换地待付款
			userInfo: {} // 用户信息
		};
	},
	async onShow(e) {
		const [error, res] = await uni.getStorage({
			key: 'userInfo'
		});
		if(res){
			this.userInfo = res.data;
		}
	},
	methods: {
		// 点击跳转到反馈意见
		handlerOpinion(){
			uni.navigateTo({
				url:'/pages/feedback/index'
			})
		},
		// 点击联系客服
		relation(){
			uni.makePhoneCall({
			    phoneNumber: '19977-456-976' 
			});
		},
		// 点击待收货 tab 栏
		handler(index) {
			this.curIndex = index;
			// 跳转页面
			if(index==2){
				uni.showToast({
					title:'暂时不支持退货、退款',
					icon:'none'
				})
			}else{
				uni.navigateTo({
					url:'../order/index?type=' + this.curIndex 
				})
			}
			
		}
	
	}
};
</script>
<style lang="less">
page {
	background: rgb(247 244 244);
}
.containter {
	.background_img {
		height: 329rpx;
		width: 750rpx;
		position: replace;
		.background {
			height: 329rpx;
			width: 750rpx;
			image {
				height: 329rpx;
				width: 750rpx;
				// 设置图片模糊状态
				filter: blur(10px);
			}
		}
		.user {
			position: absolute;
			top: 32rpx;
			left: 50%;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			transform: translateX(-50%);
			image {
				height: 172rpx;
				width: 172rpx;
				border-radius: 50%;
			}
			.user_name {
			}
		}
	}
	.login{
		height: 329rpx;
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		navigator{
			width: 352rpx;
			height: 88rpx;
			background: #07C160;
			color: #fff;
			font-size: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
	}
	.order {
		padding: 20rpx;
		display: flex;
		height: 144rpx;
		padding: 0 12rpx;
		background: #fff;
		.active {
			color: #ea4350;
		}
		.order_containter {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.icon {
				font-size: 60rpx;
			}
			.content {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}
	.list {
		margin-top: 30rpx;
		background-color: #fff;
		.service {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 101rpx;
			margin: 0 28rpx;
			border-bottom: 1rpx solid #ccc;
			.left {
				display: flex;
				.iconfont {
					margin-right: 28rpx;
					font-size: 45rpx;
				}
				view {
					font-size: 26rpx;
					color: #434343;
					line-height: 80rpx;
				}
			}
			.right {
				font-size: 26rpx;
				color: #434343;
			}
		}
	}
}
</style>
